<template>
	<view class="">
		<!-- 顶部导航 -->
		<fa-navbar :title="title"></fa-navbar>
		<!-- 用户信息 -->
		<u-sticky :enable="false"><fa-user-header :user="user" :showMore="showMore"></fa-user-header></u-sticky>
		<!-- 内容 -->
		<view class="u-p-t-30 u-p-l-30 u-p-r-30">
			<view class="u-p-30 answer-item u-m-b-30" v-for="(item, index) in answerList" :key="index">
				<view class="question" @click="goPage(item.question_id)">
					<u-tag :bg-color="theme.lightColor" :border-color="theme.faBorderColor" :color="theme.bgColor" text="问" mode="light" size="mini" />
					<text class="u-m-l-20 u-main-color text-break">{{ item.question && item.question.title }}</text>
				</view>
				<view class="u-m-t-30 u-tips-color u-font-22 text-break">
					<view class="" @click="goPage(item.question_id)" v-if="!idAudio(item.content)">
						<u-parse
							:html="item.content_fmt"
							:tag-style="vuex_parse_style"
							:domain="vuex_config.upload ? vuex_config.upload.cdnurl : ''"
							@linkpress="navigate"
						></u-parse>
					</view>
					<view class="" v-else><fa-audio :htmls="item.content"></fa-audio></view>
				</view>
				<view class="u-m-t-30 u-flex u-row-between u-tips-color" @click="goPage(item.question_id)">
					<view class="">
						<u-icon name="chat"></u-icon>
						{{ item.comments }} 条评论
					</view>
					<view class="" @click.stop="collection(item)">
						<u-icon name="bookmark-fill"></u-icon>
						{{ item.collected ? '已收藏' : '收藏' }}
					</view>
					<view class="" @click.stop="thanks(item.id)">
						<u-icon name="heart-fill"></u-icon>
						感谢
					</view>
					<view class="" v-if="user.id == vuex_user.id" @click.stop="editAnswer(item.id, index)">
						<u-icon name="edit-pen-fill"></u-icon>
						补充回答
					</view>
					<view class="" v-if="vuex_isAdmin">
						<u-icon name="trash-fill"></u-icon>
						删除
					</view>
				</view>
			</view>
		</view>
		<!-- 加载更多 -->
		<view class="u-p-t-10 u-p-b-30" v-if="answerList.length"><u-loadmore bg-color="#f4f6f8" :status="has_more ? status : 'nomore'" /></view>
		<!-- 空数据 -->
		<wanl-empty style="padding:0;" v-if="!answerList.length"></wanl-empty>
		<!-- 感谢 -->
		<fa-thanks ref="faThank" :source_id="source_id" type="answer"></fa-thanks>
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }" :custom-style="{ backgroundColor: theme.lightColor }"></u-back-top>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
import { collection, others } from '@/common/fa.mixin.js';
export default {
	mixins: [collection, others],
	computed: {
		idAudio() {
			return item => {
				return item.indexOf('<audio') != -1 && item.indexOf('duration=') != -1;
			};
		}
	},
	onLoad(e) {
		let query = this.$Route.query || e || {};
		let user_id = query.user_id || 0;
		if (user_id) {
			this.title = 'TA的回答';
			uni.setNavigationBarTitle({
				title: this.title
			});
			this.showMore = true;
			this.user = this.vuex_othen_user;
		} else {
			this.user = this.vuex_user;
		}
		this.getUserAnswer();
	},
	onHide() {
		uni.$emit('audioUpdate', '页面hide,停止');
	},
	data() {
		return {
			title: '我的回答',
			showMore: false,
			source_id: 0,
			user: {},
			answerList: [],
			scrollTop: 0,
			page: 1,
			has_more: false,
			status: 'loadmore'
		};
	},
	methods: {
		change(index) {
			this.current = index;
		},
		getUserAnswer: async function() {
			let res = await this.$api.getUserAnswer({
				id: this.user.id,
				page: this.page
			});
			this.status = 'loadmore';
			if (!res.code) {
				this.$u.toast(res.msg);
				return;
			}
			this.answerList = this.answerList.concat(res.data.data);
			this.has_more = res.data.last_page < res.data.current_page;
		},
		goPage(id) {
			this.$wanlshop.to(`/pages/community/question/detail?id=${id}`);
		},
		//收藏或取消收藏
		collection(item) {
			if (item.collected) {
				this.goCollectionDelete(item, 'answer');
			} else {
				this.goCollectionCreate(item, 'answer');
			}
		},
		//感谢
		thanks(id) {
			this.source_id = id;
			this.$refs.faThank.show();
		},
		//编辑答案
		editAnswer(id, index) {
			//监听答案更新事件
			uni.$once('myAnswerUpdate', res => {
				this.$set(this.answerList, res.index, res.data);
			});
			this.$wanlshop.to(`/pages/community/question/answer?id=${id}&index=${index}&event=myAnswerUpdate`);
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onReachBottom() {
		if (this.has_more) {
			this.status = 'loading';
			this.page++;
			this.getUserAnswer();
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f4f6f8;
}

.answer-item {
	background-color: #ffffff;
	box-shadow: 0 0 5px rgba(0, 134, 243, 0.1);
	border-radius: 3px;
}
</style>
